<template>
  <div class="demandContainer">
    <Bcb_220>
      <div class="demandMain">
        <div class="demandHeader">{{ msg.title }}</div>
        <div class="demandLine">
          <line_a :title="msg.enSubTitle" color="#FFFFFF" font-size="19px" />
        </div>
        <div class="demandContent">
          <div class="demandLeft"></div>
          <div class="demandRight"><registerCard /></div>
        </div>
      </div>
    </Bcb_220>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import line_a from "@/components/line/line_a.vue";
import Bcb_220 from "@/components/skeleton/bcb_220.vue";
import registerCard from "./sub/demandregcard.vue";

const msg = i18nt.value.demand;
</script>

<style scoped lang="scss">
.demandContainer {
  @include rel_cen_hw;
  background: #181e46;
}

.demandMain {
  @include relative_hw;
  flex-direction: column;
  align-items: center;

  .demandHeader {
    @include rel_cen_hw(48px, 136px);
    font-family: "Songti SC", "Songti SC";
    font-weight: 900;
    font-size: 34px;
    color: #ffffff;
    margin-top: 70px;
  }
  .demandLine {
    @include relative_hw(26px, 100%);
    margin-top: 6px;
  }

  .demandContent {
    @include relative_hw(380px, 100%);
    flex-direction: row;
    // justify-content: space-between;
    margin-top: 60px;

    .demandLeft {
      @include relative_hw(380px, 709px);
      background: url("@/assets/png/demand.png");
    }
    .demandRight {
      margin-left: 57px;
      @include relative_hw(380px, 714px);
    }
  }
}
</style>
